import React, { useEffect, useState } from 'react';
import { Card, Row, Col, message, Spin, Form, Tooltip, Icon, Divider, Empty } from 'antd';
import { connect } from 'umi';
import moment from 'moment';
import { get as getPath } from 'object-path';
import { hideSalaryTable } from '@/utils/utils';
import SalaryRefTable from '@/components/SalaryRefTable';
import QueryPage from '@/components/QueryPage';
import { history } from 'umi';
import { withRoutePage } from '@/utils/enhanceUtils';
import styles from './index.less';

const { Item } = Form;
const RegularHistory = ({ regularization, dispatch, location }) => {
    const { query } = location;
    const { historyData } = regularization;
    const [historyTab, setHistoryTab] = useState(0);
    const [spinning, setSpinning] = useState(false);
    const moneyStatus = {
        0: '不变',
        1: '上浮',
        2: '下降'
    };
    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 4 }
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 8 }
        }
    };
    const formItemLayoutTwo = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 8 }
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 }
        }
    };

    // 获取当前用户地区
    const getCity = () => {
        if (query.companyId && query.companyId === 100) {
            return '集团';
        }
        if (query.companyId === 101) {
            return '厦门';
        }
        return '新加坡';
    };
    // 获取当前用户符号
    const getCityMoney = () => {
        if (query.companyId && query.companyId === 100) {
            return 'S$';
        }
        if (query.companyId === 101) {
            return '¥';
        }
        return 'S$';
    };
    // 获取详情
    const fetchDetail = () => {
        setSpinning(true);
        dispatch({
            type: query.type === 'hr' ? 'regularization/getHistoryDetail' : 'regularization/getPersonHistoryDetail',
            payload: {
                employeeCode: query.employeeCode
            },
            callback: response => {
                if (response.code !== 10000) {
                    setSpinning(false);
                    message.error(response.msg);
                    if (response.code === 150004) {
                        history.push('/personal/portal');
                    }
                } else {
                    setSpinning(false);
                }
            }
        });
    };

    // 切换tab
    const changeHistoryTab = index => {
        setHistoryTab(index);
    };

    const renderSpan = () => (
        <span>
            {historyData[historyTab].regularDate}
            <span
                style={{
                    color: '#FF0000',
                    opacity: '0.85',
                    paddingLeft: '8px'
                }}
            >
                转正延期
            </span>
        </span>
    );

    const renderText = () =>
        `${historyData[historyTab].salaryAdjPerHr}% ${
            historyData[historyTab].adjustSalary ? `${getCityMoney()}${historyData[historyTab].adjustSalary}/月` : ''
        }`;
    useEffect(() => {
        fetchDetail();
        return () => {
            dispatch({
                type: 'regularization/clear'
            });
        };
    }, []);

    return (
        <div>
            <QueryPage
                form={
                    <Card
                        bordered={false}
                        title={
                            <Row justify="space-between" type="flex">
                                <Col className={styles.regularizationTitle}>
                                    转正历史记录-{getCity()}-{query.employeeName}
                                </Col>
                            </Row>
                        }
                        className={styles.regularizationHistoryCard}
                    >
                        <Spin spinning={spinning} delay={0}>
                            {historyData && historyData.length > 0 ? (
                                <div>
                                    <ul className={styles.regularizationTab}>
                                        {historyData && historyData.length > 1 ? (
                                            historyData.map((item, index) => (
                                                <li
                                                    key={item.id}
                                                    className={historyTab === index ? styles.active : ''}
                                                    onClick={() => {
                                                        changeHistoryTab(index);
                                                    }}
                                                >
                                                    {moment(item.regularDate).format('YYYY-MM-DD')} 转正申请-转正
                                                    {historyData[historyTab] && historyData[historyTab].hrApproval === 0
                                                        ? '成功'
                                                        : '延期'}
                                                    {/* {item.states === '7' ? '成功' : '失败'} */}
                                                </li>
                                            ))
                                        ) : (
                                            <li
                                                key={historyData[0].id}
                                                className={styles.active}
                                                style={{ borderRadius: '4px' }}
                                                onClick={() => {
                                                    changeHistoryTab(0);
                                                }}
                                            >
                                                {moment(historyData[0].regularDate).format('YYYY-MM-DD')} 转正申请-转正
                                                {historyData[historyTab] && historyData[historyTab].hrApproval === 0
                                                    ? '成功'
                                                    : '延期'}
                                            </li>
                                        )}
                                    </ul>
                                    {/* 员工基本信息 */}
                                    <div className={styles.regularizationTitle} style={{ margin: '32px 0 24px' }}>
                                        员工基本信息
                                    </div>
                                    <Row className={styles.regularForm}>
                                        <Col span={12}>
                                            <Form {...formItemLayoutTwo}>
                                                <Item label="员工姓名">
                                                    {historyData[historyTab].employeeName || ''}
                                                </Item>
                                                <Item label="部门：">
                                                    {historyData[historyTab].departmentName || ''}
                                                </Item>
                                                <Item label="职位">{historyData[historyTab].postName || ''}</Item>
                                                <Item label="入职日期">{historyData[historyTab].entryDate || ''}</Item>
                                                <Item label="试用期">
                                                    {historyData[historyTab].tryDuration
                                                        ? `${historyData[historyTab].tryDuration}个月`
                                                        : ''}
                                                </Item>
                                            </Form>
                                        </Col>
                                        <Col span={12}>
                                            <Form {...formItemLayoutTwo}>
                                                <Item label="隶属公司">
                                                    {historyData[historyTab].companyName || ''}
                                                </Item>
                                                <Item label="直属上级">{historyData[historyTab].leader || ''}</Item>

                                                <Item label="职级">{historyData[historyTab].postGradeCode || ''}</Item>
                                                <Item label="预计转正日期">
                                                    {historyData[historyTab] && historyData[historyTab].hrApproval === 1
                                                        ? renderSpan()
                                                        : historyData[historyTab].regularDate}
                                                </Item>
                                            </Form>
                                        </Col>
                                    </Row>
                                    <Divider style={{ margin: '16px 0', color: 'rgba(0, 0, 0, 0.08)' }} />
                                    {/* 转正申请（自评） */}
                                    <div className={styles.regularizationTitle} style={{ margin: '32px 0 24px' }}>
                                        转正申请（自评）
                                    </div>
                                    <Form {...formItemLayout} className={styles.regularForm}>
                                        <Item label="工作描述">
                                            <pre
                                                style={{
                                                    whiteSpace: 'pre-wrap',
                                                    wordWrap: 'break-word'
                                                }}
                                            >
                                                {historyData[historyTab].workDesc || ''}
                                            </pre>
                                        </Item>
                                        <Item label="主要成就">
                                            <pre
                                                style={{
                                                    whiteSpace: 'pre-wrap',
                                                    wordWrap: 'break-word'
                                                }}
                                            >
                                                {historyData[historyTab].outstandingPerformance || ''}
                                            </pre>
                                        </Item>
                                        <Item label="需要改进的地方">
                                            <pre
                                                style={{
                                                    whiteSpace: 'pre-wrap',
                                                    wordWrap: 'break-word'
                                                }}
                                            >
                                                {historyData[historyTab].improve || ''}
                                            </pre>
                                        </Item>
                                        <Item label="对公司的建议">
                                            <pre
                                                style={{
                                                    whiteSpace: 'pre-wrap',
                                                    wordWrap: 'break-word'
                                                }}
                                            >
                                                {historyData[historyTab].employeeToProposal || ''}
                                            </pre>
                                        </Item>
                                    </Form>
                                    <Divider style={{ margin: '32px 0 16px', color: 'rgba(0, 0, 0, 0.08)' }} />
                                    {/* 转正评估（直属上级） */}
                                    <div className={styles.regularizationTitle} style={{ margin: '32px 0 24px' }}>
                                        转正评估（直属上级）
                                    </div>
                                    <Form {...formItemLayout} className={styles.regularForm}>
                                        <Item label="工作技能和组织价值观">
                                            <pre
                                                style={{
                                                    whiteSpace: 'pre-wrap',
                                                    wordWrap: 'break-word'
                                                }}
                                            >
                                                {historyData[historyTab].superiorToWorkSkills || ''}
                                            </pre>
                                        </Item>
                                        <Item label="主要成就">
                                            <pre
                                                style={{
                                                    whiteSpace: 'pre-wrap',
                                                    wordWrap: 'break-word'
                                                }}
                                            >
                                                {historyData[historyTab].superiorToAchievement || ''}
                                            </pre>
                                        </Item>
                                        <Item label="需要改进的地方">
                                            <pre
                                                style={{
                                                    whiteSpace: 'pre-wrap',
                                                    wordWrap: 'break-word'
                                                }}
                                            >
                                                {historyData[historyTab].superiorToImprove || ''}
                                            </pre>
                                        </Item>
                                        <Item label="综合表现">{historyData[historyTab].superiorAssess || ''}</Item>
                                        {/* <Item label="转正建议">
                                                {historyData[historyTab] && historyData[historyTab].superiorApproval === 0 ? '同意 ' : '延长转正'}
                                            </Item> */}
                                    </Form>
                                    <Divider style={{ margin: '32px 0 16px', color: 'rgba(0, 0, 0, 0.08)' }} />
                                    {/* 转正评估（ HR ） */}
                                    <div className={styles.regularizationTitle} style={{ margin: '32px 0 24px' }}>
                                        转正评估（ HR ）
                                    </div>
                                    <Form {...formItemLayout} className={styles.regularForm}>
                                        <Item
                                            label={
                                                <span>
                                                    纪律处分&nbsp;
                                                    <Tooltip title="在试用期内是否有任何不当行为或纪律处分">
                                                        <Icon type="info-circle" />
                                                    </Tooltip>
                                                </span>
                                            }
                                        >
                                            {historyData[historyTab] && historyData[historyTab].punishment === 0
                                                ? '否'
                                                : '是'}
                                        </Item>
                                        <Item label="转正建议">
                                            {historyData[historyTab] && historyData[historyTab].hrApproval === 0
                                                ? '同意转正'
                                                : `试用期延长${historyData[historyTab].hrDelayDate}个月`}
                                        </Item>
                                        <Item label="当前薪资">
                                            {historyData[historyTab] && historyData[historyTab].currentSalary
                                                ? `${getCityMoney()}${historyData[historyTab].currentSalary}`
                                                : ''}
                                        </Item>
                                        <Item label="调整后薪资">
                                            {moneyStatus[getPath(historyData, `${historyTab}.salaryAdjTypeHr`, '')]}{' '}
                                            {!historyData[historyTab].salaryAdjPerHr ? '' : renderText()}
                                        </Item>
                                        {!hideSalaryTable && (
                                            <Item label="薪资参考" wrapperCol={{ sm: 18 }}>
                                                <SalaryRefTable
                                                    postId={historyData[historyTab].postId}
                                                    companyId={query.companyId}
                                                />
                                            </Item>
                                        )}
                                    </Form>
                                    <Divider style={{ margin: '32px 0 16px', color: 'rgba(0, 0, 0, 0.08)' }} />
                                    {/* 转正评估（ 区域CEO ） */}
                                    <div className={styles.regularizationTitle} style={{ margin: '32px 0 24px' }}>
                                        转正评估（ 区域CEO ）
                                    </div>
                                    <Form {...formItemLayout} className={styles.regularForm}>
                                        <Item label="意见或建议">{historyData[historyTab].ceoToApproval || ''}</Item>
                                    </Form>
                                </div>
                            ) : (
                                <Empty />
                            )}
                        </Spin>
                    </Card>
                }
            />
        </div>
    );
};
export default withRoutePage(
    connect(({ loading, regularization }) => ({
        loading: loading.models.regularization,
        regularization
    }))(RegularHistory)
);
